<template>
  <div>
    <!-- 头部区域开始 -->
    <div style="height: 60px;display: flex;">
      <div style="width: 240px;display: flex;justify-content: center;align-items: center;background-color: #004c6e;">
        <img style="width: 70px;" src="@/assets/images/logo.png" alt="">
        <span style="padding-left: 5px;font-size: 20px;font-weight: bold;color: #fff;">快递管理系统</span>
      </div>
      <div style="flex: 1;display: flex;align-items: center;padding-left: 20px;border-bottom: 1px solid #ddd;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
              v-for="(item) in breadcrumbList"
              :key="item.path"
              :to="item.path">
            {{ item.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="width: fit-content;display: flex;align-items: center;padding-left: 20px;padding-right: 20px;border-bottom: 1px solid #ddd;">
        <el-dropdown>
          <div style="display: flex;align-items: center;">
            <img v-if="data.user?.avatar" style="width: 50px; height: 50px;border-radius: 50%" :src="data.user?.avatar" alt="">
            <img v-else style="width: 50px; height: 50px;border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <span style="margin-left: 5px">{{ data.user?.name }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')">个人信息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/manager/updatePassword')">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 头部区域结束 -->

    <!-- 主体区域开始 -->
    <div style="display: flex;">

      <!-- 菜单区域开始 -->
      <div style="width: 240px; overflow: auto">
        <el-col>
          <el-menu
              router
              :default-openeds="defaultOpenedMenus"
              :default-active="activeMenu"
              style="min-height: calc(100vh - 60px);"
              background-color="#004c6e"
              text-color="#fff"
              active-text-color="#ffd04b">

            <template v-for="item in menuData" :key="item.path">

              <el-menu-item v-if="!item.children" :index="item.path">
                <el-icon><component :is="item.icon" /></el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>

              <el-sub-menu v-else :index="item.path">
                <template #title>
                  <el-icon><component :is="item.icon" /></el-icon>
                  <span>{{ item.title }}</span>
                </template>
                <el-menu-item
                    v-for="child in item.children"
                    :key="child.path"
                    :index="child.path">
                  <span> {{ child.title }}</span>
                </el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-col>
      </div>
      <!-- 菜单区域结束 -->

      <!-- 数据渲染区域开始 -->
      <div style="flex: 1;width: 0;padding: 10px;background-color: #e1e5ef">
        <RouterView @updateUser="updateUser"/>
      </div>
      <!-- 数据渲染区域结束 -->
    </div>
    <!-- 主体区域结束 -->
  </div>
</template>

<script setup>
import {computed, markRaw, reactive} from "vue";
import router from "@/router/index.js";
import {House, Notification, User, Van} from '@element-plus/icons-vue'

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || "{}")
})

// 菜单数据结构
const menuData = computed(() => {
  const baseMenus =[
  {
    path: '/manager/home',
    title: '首页',
    icon: markRaw(House)
  },
  {
    path: '/manager/',
    title: '信息管理',
    icon: markRaw(Notification),
    children: [
      { path: '/manager/notice', title: '系统公告' },
    ]
  },
  {
    path: '/manager/express',
    title: '快递管理',
    icon: markRaw(Van),
    children: [
      { path: '/manager/express/allPackage', title: '全部包裹' },
      { path: '/manager/express/unshipped', title: '待发货' },
      { path: '/manager/express/shipped', title: '已发货' },
      { path: '/manager/express/unsigned', title: '待签收' },
      { path: '/manager/express/signed', title: '已签收' },
    ]
  },
]
  if (data.user.role === 'ADMIN') {
    baseMenus.push({
      path: '/manager/info',
      title: '用户管理',
      icon: markRaw(User),
      children: [
        { path: '/manager/info/admin', title: '管理员信息' },
        { path: '/manager/info/user', title: '普通用户信息' }
      ]
    })
  }

  return baseMenus
})


// 计算属性
const activeMenu = computed(() => router.currentRoute.value.path)
const defaultOpenedMenus = [
  '/manager/express',
  '/manager/info',
  '/manager/',
]

// 面包屑计算逻辑
const breadcrumbList = computed(() => {
  const currentRoute = router.currentRoute.value
  if (currentRoute.path === '/manager/person') {
    return [{ path: currentRoute.path, title: '个人信息' }]
  }
  if (currentRoute.path === '/manager/updatePassword') {
    return [{ path: currentRoute.path, title: '修改密码' }]
  }
  const crumbs = []

  // 查找当前路由对应的菜单项
  const findMenuItem = (path) => {
    let result = null

    menuData.value.some(menu => {
      if (menu.children) {
        return menu.children.some(child => {
          if (child.path === path) {
            result = { parent: menu, current: child }
            return true
          }
        })
      }
      return menu.path === path && (result = { current: menu })
    })
    return result
  }

  // 添加父级菜单
  const matched = findMenuItem(currentRoute.path)
  if (matched?.parent) {
    crumbs.push({
      path: matched.parent.path,
      title: matched.parent.title
    })
  }

  // 添加当前路由
  if (matched?.current) {
    crumbs.push({
      path: currentRoute.path,
      title: currentRoute.meta?.title || matched.current.title
    })
  }

  return crumbs
})

const logout = () => {
  localStorage.removeItem('code_user')
  router.push('/login')
}

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('code_user') || '{}')
}

</script>

<style>

.el-menu{
  background-color: #004c6e;
  border: none;
}

.el-breadcrumb {
  font-size: 16px;
  line-height: 1.5;
}

.el-breadcrumb__inner {
  color: #666 !important;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #004c6e !important;
  font-weight: bold;
}

.el-sub-menu__title {
  background-color: #004c6e;
  color: #ddd;
}

.el-menu-item {
  height: 50px;
  color: #ddd;
}

.el-menu .is-active{
  background-color: #1e84b0;
  color: #fff;
}

.el-sub-menu__title:hover{
  background-color: #004c6e;
}

.el-menu-item:not(.is-active):hover{
  background-color: #106386;
  color: #333;
}

.el-dropdown{
  cursor: pointer;
}

.el-tooltip__trigger{
  outline: none;
}

.el-menu--inline .el-menu-item{
  padding-left: 48px !important;
}

</style>